<template>
	<view class="wrap" :style="colorStyle">
		<template v-if="normal">
			<view class="top_img">
				<image :src="topImg" mode="aspectFill" v-if="topImg"></image>
			</view>
			<view class="main">
				<view class="tray_box">
					<view class="inner_box">
						<view class="title_box">
							恭喜你，獲得<text>{{lottery_num}}</text>次抽獎機會
						</view>
						<!-- <view class="notice_box flex_c">
							<view class="icon_box">
								<u-icon name="volume-fill" color="#CF2F23" size="12"></u-icon>
							</view>
							
							<noticeBar :showMsg="noticeList"></noticeBar>
						</view> -->
						
						<view class="grids-box">
							<gridsLottery class="" :checkIndex="checkIndex" :showMasker="showMasker" :prizeData="prize" :lotteryNum="lottery_num"
								@get_winingIndex='getWiningIndex' @initCheckIndex="initCheckIndex" @luck_draw_finish='luck_draw_finish'>
							</gridsLottery>
						</view>
					</view>
				</view>
				<view class="card_box" style="border-radius: 30rpx;">
					<view class="input_box">
						<view class="top_input flex_sb">
							<view class="my_input">
								<input type="text" v-model="code" placeholder="請輸入暗號" />
							</view>
						
							<view class="btn" @click="reChangeHandle">
								<image src="../../static/imgs/rechange.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="tip_box">
							*單個餐廳輸入「暗號」兌換，僅可增加一次抽獎機會
						</view>
					</view>
				</view>
			
				<view class="card_box">
					<view class="in_card">
						<view class="title">
							<image src="@/static/imgs/card1.png" mode="aspectFill"></image>
						</view>
						<view class="body">
							<view class="top_title">
								<view class="title_item">
									id
								</view>
								<view class="title_item">
									獎品名稱
								</view>
								<view class="title_item">
									狀態
								</view>
							</view>
							<view class="goods_list" v-if="recordList.length">
								<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="getRecordList">
									<view class="goods_item flex_s" v-for="(item,index) in recordList" :key="index">
										<text>{{item.id}}</text>
										<text class="r1" v-if="item.prize">{{item.prize.name}}</text>
										<text  class="yellow" v-if="item.status==0">待審核</text>
										<text  class="yellow"  v-else-if="item.status==1">已發放</text>
										<text  class="red"  v-else>已駁回</text>
										<view class="right_icon flex_ec" @click="$u.route('/pages/record/index?id='+item.id)">
											<text>查看</text>
											<view class="icon_box">
												<u-icon name="arrow-right" size="12"></u-icon>
											</view>
										</view>
									</view>
								</scroll-view>
			
							</view>
						</view>
					</view>
				</view>
				<view class="card_box">
					<view class="in_card">
						<view class="title">
							<image src="@/static/imgs/card2.png" mode="aspectFill"></image>
						</view>
						<view class="rich_box">
							<rich-text :nodes="node"></rich-text>
						</view>
					</view>
				</view>
			</view>
			<view class="masker flex_c" v-if="show" @touchmove.stop.prevent>
				<view class="pop_box flex_fc">
					<view class="img_box" @click="$util.previewImageFun([luckInfo.image])">
						<image :src="luckInfo.image" mode="aspectFill"></image>
					</view>
					<view class="text1">
						{{luckInfo.prompt}}
					</view>
					<view class="text2">
						{{luckInfo.name}}
					</view>
					<view class="text3">
						請耐心等待平台審核通過後發放獎品
					</view>
					<view class="btn" @click="close">
						我知道了
					</view>
				</view>
			</view>
			<!-- <u-popup :show="show" zIndex="100" mode="center" round="10" @close="close" @open="open">
				
			</u-popup> -->
			<modalVue ref="modalVue" :showTitle="false" :showCancel="false" :content="modalContent"></modalVue>
		</template>
		<view class="empty_box" v-else>
			<view class="img_box">
				<image src="@/static/imgs/none.png" mode="aspectFill"></image>
			</view>
			<text>暫無抽獎活動</text>
		</view>
	</view>
</template>
<script>
	import colors from "@/mixins/color.js"
	import modalVue from "@/components/modal/modal.vue";
	import gridsLottery from '@/components/lottery/index.vue'
	import noticeBar from '@/components/noticeBar.vue'
	import {get_login_data,login} from "@/api/public.js"
	import {lottery_info,startLottery,user_record,add_user_lottery} from "@/api/info.js"
	export default {
		mixins: [colors],
		components: {
			modalVue,
			noticeBar,
			gridsLottery
		},
		data() {
			return {
				node:'',
				lottery_draw_param: {
					startIndex: 0, //开始抽奖位置，从0开始
					totalCount: 4, //一共要转的圈数
					winingIndex: 4, //中奖的位置，从0开始
					speed: 50 //抽奖动画的速度 [数字越大越慢,默认100]
				},
				show: false,
				modalContent: '您輸入頻道碼有誤或失效了，請注意檢查',
				lottery_num: 0,
				prize: [],
				noticeList:[{name:"宋佳",gift:'手表'},{name:"我",gift:'玩偶'}],
				code:'',
				showMasker:true,
				checkIndex:'',
				userInfo:{
					uid:'',
					timestamp:'',
					uniqid:'',
					sign:''
				},
				recordList:[],//用户中奖记录
				luckInfo:{},
				id:0,//抽奖id
				uniqid:'',
				topImg:'',
				normal:true
			}
		},
		onLoad(option) {
			if(option.uid){
				uni.showLoading({
					title:'加载中...'
				})
				this.userInfo.uid=option.uid
				this.userInfo.timestamp=option.timestamp
				this.userInfo.sign=option.sign
				this.userInfo.uniqid=option.uniqid
				this.loginHandle()
				// this.get_login_data()// 模拟获取登录参数
			}else{
				uni.showToast({
					title:"暂无UID",
					icon:'none'
				})
			}
			// 扫码进入获取次数
			if(option.uniqid){
				this.uniqid=option.uniqid
			}
		},
		onUnload() {
			this.uniqid=""
		},
		onHide() {
			this.uniqid=""
		},
		methods: {
			initCheckIndex(){
				this.checkIndex=""
			},
			reChangeHandle() {
				this.add_user_lottery()
				
			},
			add_user_lottery(uniqid=''){
				let params={
					type:'',
					code:''
				}
				if(uniqid){
					params.type=1
					params.code=uniqid
				}else{
					if(!this.code) return this.$util.Tips({title:'请输入兑换码'})
					params.type=2
					params.code=this.code
				}
				add_user_lottery(params).then((res)=>{
					this.code=""//清空兑换码
					this.lottery_num=res.data
					this.modalContent=res.info
					this.$refs.modalVue.open()
				}).catch((err)=>{
					this.modalContent=err
					this.$refs.modalVue.open()
				})
			},
			// 模拟获取登录参数
			get_login_data(){
				const params={
					uid:this.userInfo.uid,
					uniqid:this.userInfo.uniqid
				}
				get_login_data(params).then((res)=>{
					const data=res.data
					this.userInfo.uid=data.uid
					this.userInfo.timestamp=data.timestamp
					this.userInfo.sign=data.sign
					// this.userInfo.uniqid=data.uniqid
					this.loginHandle()
				})
			},
			// 登录获取token
			loginHandle(){
				login(this.userInfo).then((res)=>{
					const data=res.data
					const tokenData={
						token:data.token.token,
						time:data.token.expire
					}
					this.$store.commit('LOGIN',tokenData)
					this.lottery_info()
					this.getRecordList()
					// 扫码进入的
					if(this.uniqid){
						this.add_user_lottery(this.uniqid)
					}
					
				}).catch((err)=>{
					uni.hideLoading()
					this.modalContent=err
					this.$refs.modalVue.open()
				})
			},
			// 获取奖品列表
			lottery_info(){
				lottery_info().then((res)=>{
					uni.hideLoading()
					this.lottery_num=res.data.lottery_num
					const data=res.data.lottery
					// 设置标题
					if(data.name){
						uni.setNavigationBarTitle({
							title:data.name
						})
					}
					this.topImg=data.image
					this.node=data.content//抽奖规则
					this.id=data.id//抽奖id
					this.prize=data.prize//奖品列表
					// 不够八个自动补齐八个
					if(this.prize.length<8){
						const allLth=8 - this.prize.length
						for(let i=0;i<allLth;i++){
							this.prize.push({})
						}
						
					}
					//超过八个只取前八个
					if(this.prize.length>8){
						this.prize=this.prize.slice(0,8)
					}
					this.prize.push({})
					console.log(this.prize,"奖品");
				}).catch(()=>{
					this.normal=false
					uni.hideLoading()
				})
			},
			// 获取中奖记录
			getRecordList(){
				if (this.loadend) return;
				const params={
					page:this.page,
					limit:this.limit
				}
				user_record(params).then((res) => {
					let list = res.data || []
					this.loadend = list.length < this.limit
					this.recordList = this.recordList.concat(list)
					this.page++;
				}).catch(err => {
				});
			},
			getWiningIndex(callback) {
				// this.showMasker=true
				let that = this
				startLottery({
					id: this.id,
					type: 1
				}).then(res => {
					// if (res.data.code === 'subscribe') {
					// 	that.$set(that, 'followCode', true);
					// 	this.codeSrc = res.data.url
					// 	return;
					// }
					this.prize.forEach((item, index) => {
						if (res.data.id === item.id) {
							this.lottery_draw_param.winingIndex = index;
							callback(this.lottery_draw_param);
						}
					})
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
			},
			// 抽奖完成
			luck_draw_finish(param,index) {
				this.open()
				this.showMasker=false
				this.checkIndex=index
				this.luckInfo=param
				this.lottery_info()//重新获取抽奖次数
				
			},

			open() {
				this.show = true
				// console.log('open');
			},
			initData(){
				this.loadend=false
				this.recordList=[]//清空中奖记录
				this.page=1
			},
			close() {
				this.show = false
				this.initData()
				this.getRecordList()//重新获取获奖记录
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		background: #FDFAE2;
		min-height: 100vh;
		padding-bottom: 50rpx;
		.empty_box{
			text-align: center;
			padding-top: 200rpx;
			position: fixed;
			font-size: 28rpx;
			background: #FCFCE3;
			color: #4A4949;
			inset:0;
			.img_box{
				width: 400rpx;
				height: 360rpx;
				margin: 0 auto;
				margin-bottom: 40rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.masker{
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
		}
		.pop_box {
			width: 610rpx;
			height: 590rpx;
			background: var(--view-theme);
			padding: 48rpx 0 50rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.btn {
				width: 410rpx;
				height: 75rpx;
				line-height: 75rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000;
				text-align: center;
				background: var(--view-btn);
				border-radius: 8rpx;
			}

			.text1 {
				color: #9A9A9A;
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.text2 {
				color: #FF4E26;
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.text3 {
				color: #333333;
				font-size: 24rpx;
				font-weight: 500;
				margin-bottom: 25rpx;
			}

			.img_box {
				width: 210rpx;
				height: 210rpx;
				margin-bottom: 15rpx;
				border-radius: 20rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.top_img {
			width: 749rpx;
			margin: 0 auto;
			height: 510rpx;
			background-image: url('@/static/imgs/top_img.png');
			background-size: cover;
			background-repeat: no-repeat;
			
			image {
				width: 100%;
				height: 100%;
			}
		}

		.main {
			position: relative;
			margin-top: -30rpx;
			// width: 100%;
			overflow: hidden;
			.tray_box {
				position: relative;
				width:  749rpx;
				height: 880rpx;
				overflow: hidden;
				margin: 0 auto;
				// background: var(--view-theme);
				margin-bottom: 50rpx;
				background-image: url('../../static/imgs/gift.png');
				/* 背景图像 */
				background-repeat: no-repeat;
				/* 不重复 */
				background-position: center center;
				/* 居中 */
				background-size: cover;/* 覆盖整个元素 */
				.inner_box{
					width: 642rpx;
					height: 726rpx;
					position: absolute;
					inset: 0;
					margin: auto;
					padding-top: 28rpx;
					.title_box{
						font-size: 40rpx;
						color: #CF2F23;
						text-align: center;
						margin-bottom: 10rpx;
					}
					.notice_box{
						margin: 0 auto;
						width: 432rpx;
						height: 43rpx;
						background: linear-gradient(90deg, rgba(253, 236, 226, 0.3) 0%, rgba(207, 47, 35, 0.3) 45.83%, rgba(253, 236, 226, 0.3) 100%);
						.icon_box {
							margin-right: 10rpx;
						}
					}
					.grids-box {
						width: 560rpx;
						height: 560rpx;
						// z-index: 10000;
						margin: 0 auto;
					}
				}
				
			}

			.card_box {
				width: 710rpx;
				margin: 0 auto;
				border-radius: 20rpx;
				overflow: hidden;
				background: #fff;
				margin-bottom: 40rpx;

				.in_card {
					width: 690rpx;
					// min-height: 600rpx;
					border: 1px dotted #FF8D1A;
					margin: 10rpx auto;
					border-radius: inherit;
					padding: 28rpx 10rpx 30rpx;

					.rich_box {
						padding: 0 24rpx;
					}

					.title {
						width: 268rpx;
						height: 56rpx;
						margin: 0 auto;
						margin-bottom: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.body {
						.top_title {
							padding-left: 14rpx;
							display: grid;
							grid-template-columns: repeat(4, 1fr);
							color: #696969;
							font-size: 24rpx;
							margin-bottom: 10rpx;

							.title_item {
								text-align: center;
							}
						}

						.goods_list {
							// padding: 0 10rpx;
							height: 420rpx;
							overflow: hidden;

							.goods_item {
								display: grid;
								grid-template-columns: repeat(4, 1fr);
								text-align: center;
								margin-bottom: 17rpx;
								width: 669rpx;
								height: 80rpx;
								padding: 0 25rpx;
								background: rgba(207, 47, 35, 0.05);
								font-size: 24rpx;

								.right_icon {
									text-align: right;
								}
							}

							.yellow {
								color: #FF8D1A;
							}

							.red {
								color: #D43030
							}
						}
					}
				}

				.input_box {
					padding: 16rpx 20rpx;

					.my_input {
						flex: 1;
						font-size: 30rpx;
						padding-left: 27rpx;
						height: 90rpx;
						border-radius: 20rpx;
						color: #616161;
						background: #F2F2F2;

						input {
							height: 100%;
						}
					}

					.btn {
						width: 135rpx;
						height: 100rpx;
						border-radius: 30rpx;
						overflow: hidden;
						margin-left: 24rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}

					.tip_box {
						font-size: 28rpx;
						color: #CF2F23;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>